<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>Vue 入门学习</h2>
        <h2>wh2101-daydayup</h2>
        <p>Are you ok?</p>
        <h4 v-on:click="count++">{{txt}} {{count}} </h4>
        <button v-on:click="changeText">点击修改 txt</button>
        <h5 v-bind:data-qq="qq" v-on:click="changeqq(8888888888)">{{qq}} </h5>
        <button @click="flag =!flag">点击{{flag?'隐藏':'显示'}} </button>
        <div v-if="!flag">
            <img style="width: 500px;height: 150px;" v-bind:src="url" alt="">
            <p>
                <a v-bind:href="link">点击跳转</a>
            </p>
        </div>
        <p>{{word}} </p>
        <p v-text = "word"></p>
        <div>888889999999
            {{tag}}
        </div>
        <div v-html ="tag">

        </div>
    </div>
    <ul>
        <li v-for="(item,index) in list" >{{index+1}}.{{item}}</li>
    </ul>
    <!-- <ul>
        <li v-for="(item,index) in list" >{{item}} </li>
    </ul> -->
    <!-- <input type="text" value="v-"> -->
   <h6>{{txt}} </h6>
</body>
<script>
    //Vue 是一个构造函数
    var vm = new Vue({
        el: "#app",
        data: { // 定义变量
            txt: "慢慢玩,不要急",
            qq: 1726555982,
            count: 2101,
            url: "https://fms.res.meizu.com/dms/2021/04/02/904063b7-9315-479f-a751-fba562350682.jpg",
            link: "http://sshly.gz01.bdysite.com/MeiZu/html/index1.html",
            flag: true,
            word:"欢迎您",
            tag:"<h1>欢迎登陆</h1>",
            list:['Vue',"React","Angular","TypeScript","Webpack","Node"],
            // list:["撸起袖子","加油干","干不动"],
            // value:"ni shi sb ma"
        },
        methods: { //定义方法
            changeText() {
                this.txt = "Vue 数据修改都是基于响应式的"
            },
            changeqq(q) {
                this.qq = q

            }

        }


    })
</script>

</html>